<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" href="css/shoppingcart.css" />
		<link rel="stylesheet" href="css/zero.css" />
	</head>
	<body>
		<!--头部-->
		<div id="top">
			<a href="index.html"><img src="imger/dj2.jpg" class="tu"/></a>
			<a id="tu1">迪迦外卖</a>
			<div id="middle">
				<a>购 物 车</a>
			</div>
			<div id="right">
				<input type="text" placeholder=""/>
				<button id="btn">搜索</button>
			</div>
		</div>
		
		<!--中间-->
		<div class="banner">
			<!--<a><img src="imger/p1.png" id="pic"/></a>-->
			<div class="table">
			<table>
				<tr class="tr">
					<th>商品ID</th>
					<th>产品展示</th>
					<th>产品名称</th>
					<th>购买数量</th>
					<th>产品单价</th>
					<th>操作</th>
				</tr>
				<tr>
					<td class="name">1</td>
					<td><img src="imger/m1.jpg" id="img"></td>
					<td class="name">牛肉面</td>
					<td>
						<div class="name1">
							<button class="decrement" onclick="jian()">-</button>
							<input type="text" class="itxt" value="1" id="shang" />
							<button class="increment" onclick="jia()">+</button>
							</div>
						</td>
						<td class="name">12</td>
						<td><button id="an">移出购物车</button></td>
				</tr>
				<tr>
					<td class="name">2</td>
					<td><img src="imger/m1.jpg"/ id="img"></td>
					<td class="name">牛肉面</td>
					<td> 
						<div class="name1">
							<button class="decrement">-</button>
							<input type="text"  class="itxt"/>
							<button class="increment">+</button>
						</div>
					</td>
					<td class="name">13</td>
					<td><button id="an">移出购物车</button></td>
				</tr>
				<tr>
					<td class="name">3</td>
					<td><img src="imger/m1.jpg"/ id="img"></td>
					<td class="name">牛肉面</td>
					<td> 
						<div class="name1">
							<button class="decrement">-</button>
							<input type="text"  class="itxt"/>
							<button class="increment">+</button>
						</div>
					</td>
					<td class="name">99</td>
					<td><button id="an">移出购物车</button></td>
				</tr>
				<tr>
					<td class="name">4</td>
					<td><img src="imger/m1.jpg"/ id="img"></td>
					<td class="name">牛排</td>
					<td> 
						<div class="name1">
							<button class="decrement">-</button>
							<input type="text"  class="itxt"/>
							<button class="increment">+</button>
						</div>
					</td>
					<td class="name">88</td>
					<td><button id="an">移出购物车</button></td>
				</tr>
				<tr id="zongjia">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td><a id="a1">总    价 :</a></td>
					<td><a type="text" name="price" value="" id="yiqian" />0.00</td>
					<td><button id="a2">结 算</button></td>
				</tr>	
			</table>
			</div>
		</div>
		
		<!--底部-->
		<div class="bottom">
			<div class="bottom1">
				<ul id="bottom2">
				<li><a>开发平台</a></li>
				<li><a>平台制度</a></li>
				<li><a>资助我们</a></li>
				<li><a>问题反馈</a></li>
				</ul>
				<ul id="bottom3">
				<li><a>联系客服</a></li>
				<li><a>诚招英才</a></li>
				<li><a>廉政举报</a></li>
				<li><a>加入我们</a></li>
				</ul>
			</div>
			<div id="bottom4">
				<img src="imger/timg.gif" />
			</div>
			<div id="bottom5">
				<img src="imger/timg.gif"/>
			</div>
			<div class="last">
				<h3>
					<div align="center">
						地址：广西来宾市兴宾区兰海露家   邮编：546100
						<br>公司电话：0771-3265400&nbsp; 陈哥电话：0771-3262025
						<br>Copyright 2002-2018 迪迦外卖  All Rights Reserved .
						&nbsp; 
						<br>备案/许可证编号：桂ICP备16007110号 
					</div>
                </h3>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				$('.itxt').val('0');//获取文本框的值
				//加
				$('.increment').click(function(){
					$(this).prev().val(parseInt($(this).prev().val())+0);   
				})
				//减
				$('.decrement').click(function(){
					$(this).next().val(parseInt($(this).next().val())-0);
					if( $('.itxt').val() <= 1 ){
						$('.itxt').val('1');//文本框中的值不能小于1  否则就等于1
					}
				})
			})
			
		var price = 0.00;
		var price1 = 0.00;
		var price2 = 0.00;

		function jian() {
			var i = parseInt(document.getElementById("shang").valueOf().value) - 1;
			if(i <= 0) {
				i = 0;
			}
			document.getElementById("shang").valueOf().value = i;
			price1 = 12 * i;
			document.getElementById("yiqian").value = suan(price1);
			zong();
		}

		function jia() {
			var i = parseInt(document.getElementById("shang").valueOf().value) + 1;
			document.getElementById("shang").valueOf().value = i;
			price1 = 12 * i;
			document.getElementById("yiqian").value = suan(price1);
			zong();
		}

		function suan(number) {
			price = price1;
			if(isNaN(number)) {
				return false;
			}
			number = Math.round(number * 100) / 100;
			var s = number.toString();
			var rs = s.indexOf(".");
			if(rs < 0) {
				rs = s.length;
				s += ".";
			}
			while(s.length <= rs + 2) {
				s += "0";
			}
			return s;
		}

		function zong() {
			price = price1;
			if(isNaN(price)) {
				return false;
			}
			price = Math.round(price * 100) / 100;
			var s = price.toString();
			var rs = s.indexOf(".");
			if(rs < 0) {
				rs = s.length;
				s += ".";
			}
			while(s.length <= rs + 2) {
				s += "0";
			}
			document.getElementById("yiqian").innerHTML = s;
		}
			
		</script>
</html>
